<template>


  <div style="margin-top: 30px">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

      <el-form-item label="物业名称" prop="pmid">
        <el-select v-model="formData.pmid" placeholder="请选择物业名称"  @visible-change="clearCarshomeList" clearable :style="{width: '100%'}"
                   :disabled="disabled">
          <el-option
            v-for="item in this.propertyList"
            :key="item.pmid"
            :label="item.propertyName"
            :value="item.pmid">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="车场名称" prop="chid">
        <el-select v-model="formData.chid" placeholder="请选择车场名称" @visible-change="getListCars" clearable :style="{width: '100%'}"
                   :disabled="disabled">
          <el-option
            v-for="item in this.carshomeList"
            :key="item.chid"
            :label="item.chname"
            :value="item.chid">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="岗亭名称" prop="boothname">
        <el-input v-model="formData.boothname" placeholder="请输入岗亭名称" clearable :style="{width: '100%'}"
                  :disabled="disabled">
        </el-input>
      </el-form-item>
      <el-form-item label="岗亭IP" prop="boothip">
        <el-input v-model="formData.boothip" placeholder="请输入岗亭IP" clearable :style="{width: '100%'}"
                  :disabled="disabled">
        </el-input>
      </el-form-item>
      <el-form-item label="所属区域" prop="boothaddr">
        <el-input v-model="formData.boothaddr" placeholder="请输入所属区域" clearable :style="{width: '100%'}"
                  :disabled="disabled">
        </el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}"
                  :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm" :disabled="disabled">提交</el-button>
        <el-button @click="resetForm" :disabled="disabled">重置</el-button>
        <el-button @click="goback">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {addBooth, getBooth, updateBooth} from "@/api/modules/sys-cars-home/booth/booth";
import {listHome} from "@/api/modules/sys-cars-home/home";
import {listProperty} from "@/api/modules/sys-property/property";

export default {
  components: {},
  props: [],
  data() {
    return {
      disabled: false,
      // 车场管理表格数据
      carshomeList: [],
      // 物业数据
      propertyList: [],
      formData: {
        chbid: undefined,
        pmid: undefined,
        chid: undefined,
        boothname: undefined,
        boothip: undefined,
        boothaddr: undefined,
        remark: undefined,
      },

      // 查询参数
      queryParams2: {
        pmid: null,
      },



      rules: {
        pmid: [{
          required: true,
          message: '请选择物业名称',
          trigger: 'change'
        }],
        chid: [{
          required: true,
          message: '请选择停车场',
          trigger: 'change'
        }],
        boothname: [{
          required: true,
          message: '请输入岗亭名称',
          trigger: 'blur'
        }],
        boothip: [{
          required: true,
          message: '请输入岗亭IP',
          trigger: 'blur'
        }],
        boothaddr: [{
          required: true,
          message: '请输入所属区域',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.listen();
    this.getListProperty()
    this.getListCars()
  },
  mounted() {
  },
  methods: {
    /** 查询车场管理列表 */
    getListCars() {
      listHome(this.queryParams2).then(response => {
        this.carshomeList = response.rows;
      });
    },

    /** 查询物业列表 */
    getListProperty() {
      this.loading = true;
      listProperty(this.queryParams).then(response => {
        this.propertyList = response.rows;
        console.log(this.propertyList)
        this.total = response.total;
        this.loading = false;
      });
    },
    //清除车场
    clearCarshomeList(){
      this.queryParams2.pmid=this.formData.pmid
      this.queryParams.chname=null
    },



    listen() {

      if (this.$route.query.operate == "修改") {
        this.getBooth()
      } else if (this.$route.query.operate == "新增") {
        this.formData = {}
      } else {
        this.disabled=this.$route.query.disabled;
        this.getBooth()
      }

    },

    getBooth(){
      const chbid = parseInt(this.$route.query.chbid)
      getBooth(chbid).then(response => {
        this.formData.chbid = parseInt(response.data.chbid);
        this.formData.pmid = parseInt(response.data.propertyManagement.pmid);
        this.formData.chid = parseInt(response.data.chid);
        this.formData.boothaddr = response.data.boothaddr;
        this.formData.boothname = response.data.boothname;
        this.formData.boothip = response.data.boothip;
        this.formData.remark = response.data.remark;
      });
    },

    // 表单重置
    resetForm() {
      if(this.$route.query.operate == "新增"){
        this.formData = {}
      }else {
        this.getBooth()
      }

    },


    /** 提交按钮 */
    submitForm() {
      this.form = this.formData
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (this.form.chbid != undefined) {
            updateBooth(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.goback();
            });
          } else {
            addBooth(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.goback();
            });
          }
        }
      });
    },


    goback() {
      this.$store.dispatch('tagsView/delAllViews',this.$router);
      this.$router.push("booth")
    },




  }
}

</script>
<style>
</style>

